<template>
  <div>
    <!-- 联赛数据 -->
    <!-- competitiondata -->
    <el-row class="header">
      <el-cord class="text first">联赛数据统计：</el-cord>
      <el-cord class="shu" @click="substation">
        <el-row class="text">已有分站赛</el-row>
        <el-row class="number">{{ queryParams?.subRace }}</el-row>
        <el-row class="txt">站</el-row>
      </el-cord>
      <el-cord class="shu" @click="unit">
        <el-row class="text">联赛参赛单位</el-row>
        <el-row class="number">{{ queryParams?.companies }}</el-row>
        <el-row class="txt">个</el-row>
      </el-cord>
      <el-cord class="shu" @click="people">
        <el-row class="text">联赛参赛人数</el-row>
        <el-row class="number">{{ queryParams?.players }}</el-row>
        <el-row class="txt">位</el-row>
      </el-cord>
      <el-cord class="shu" @click="peopleTime">
        <el-row class="text">联赛参赛人次</el-row>
        <el-row class="number">{{ queryParams?.playerTimes }}</el-row>
        <el-row class="txt">次</el-row>
      </el-cord>
      <el-cord class="shu">
        <div @click="money">
          <el-row class="text">缴费金额</el-row>
          <el-row class="number">{{ queryParams?.cptFee }}</el-row>
          <el-row class="txt">元</el-row>
        </div>
        <br />
        <el-row class="link" @click="goFN">查看详情>></el-row>
      </el-cord>
    </el-row>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { getList } from "@/api/match/data.js";
const route = useRoute();
const router = useRouter();
const id = ref(route.query.id);
const data = reactive({
  form: {},
  queryParams: {},
});

const { form, queryParams } = toRefs(data);

// 加载数据
initData();
function initData() {
  form.value.cptId = id.value;
  form.value.type = 1;
  form.value.flag = 3;
  getList(form.value).then((res) => {
    queryParams.value = res.data;
    console.log(queryParams.value);
  });
}

function goFN() {
  router.push({
    path: "/match/leagueParticulars",
    query: { id: id.value, type: 1 },
  });
}

function substation() {
  router.push({
    path: "/match/substation",
    query: { id: id.value, type: 1 },
  });
}
function unit() {
  router.push({
    path: "/match/unit",
    query: { id: id.value, type: 1 },
  });
}
function people() {
  router.push({
    path: "/match/people",
    query: { id: id.value, type: 1 },
  });
}
function peopleTime() {
  router.push({
    path: "/match/peopleTime",
    query: { id: id.value, type: 1 },
  });
}
function money() {
  router.push({
    path: "/match/money",
    query: { id: id.value, type: 1 },
  });
}
</script>

<style scope>
.header {
  display: flex;
  justify-content: space-between;
  padding: 0 10%;
  padding-top: 30px;
}
.text {
  display: flex;
  justify-content: center;
  font-size: 20px;
}

.first {
  font-weight: 400;
  font-size: 22px;
}

.number {
  display: flex;
  justify-content: center;
  font-size: 50px;
  color: #3a80ec;
  margin-top: 30px;
}

.txt {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.link {
  color: #5fb2ff;
  display: flex;
  justify-content: center;
  margin-top: 30px;
  cursor: pointer;
}
.shu {
  cursor: pointer;
}
</style>
